<template>
    <div class="base-pop-panel-pop-container" :class="[type]" :style="{
        height: valueOrStr(height),
        width: valueOrStr(width),
        right: valueOrStr(right),
        left: valueOrStr(left),
        top: valueOrStr(top),
        bottom: valueOrStr(bottom),
    }">
        <div class="base-pop-panel-common-bg" />
        <div class="base-pop-panel-pop-detail">
            <div class="base-pop-panel-title-line">
                <div class="base-pop-panel-title-left">
                    <slot name="title">
                        <div>
                            {{ title }}
                        </div>
                    </slot>
                </div>
                <div v-if="showClose" class="base-pop-panel-close" @click="close"></div>
            </div>
            <div class="base-pop-panel-content">
                <slot />
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import type { PropType } from 'vue'

/**
 * 定义props
 */
defineProps({
    /**
     * 标题
     */
    title: {
        type: String,
        default: '',
    },
    /**
     * 高度
     * 同时支持max-height特殊字段
     * 同时支持layer-panel-max-height特殊字段
     */
    height: {
        type: [Number, String],
        default: 400,
    },
    /**
     * 宽度
     */
    width: {
        type: [Number, String],
        default: 800,
    },

    showClose: {
        type: Boolean,
        default: true,
    },
    /**
     * 位置
     */
    type: {
        type: String as PropType<'left' | 'right' | 'center'>,
        default: 'center',
    },
    top: {
        type: [Number, String],
        default: 160,
    },
    left: {
        type: [Number, String],
        default: undefined,
    },
    right: {
        type: [Number, String],
        default: undefined,
    },
    bottom: {
        type: [Number, String],
        default: undefined,
    },
})

/**
 * 定义emit
 */
const emit = defineEmits(['close'])

// 处理像素
const valueOrStr = (val: string | number | undefined) => {
    if (typeof val === 'undefined') {
        return undefined
    } else if (val === 'max-height') {
        return 'calc(100% - 160px - 64px)'
    } else if (val === 'layer-panel-max-height') {
        return 'calc(100% - 160px - 140px)'
    } else if (typeof val === 'string') {
        return val
    }
    return `${val}px`
}

// 面板关闭事件
const close = () => {
    emit('close')
}
</script>
